import React from 'react';
import { Space, Splitter } from 'antd';

const DashboardLayout = ({ children }) => {
    return (
        <Space direction="vertical" style={{ width: '100%', height: 'calc(100vh - 48px - 64px)' }}>
            <Splitter
                lazy
                style={{ height: 'calc((100vh - 48px - 64px - 12px) / 3)', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}
            >
                <Splitter.Panel defaultSize="40%" min="20%" max="70%">
                    {children?.topLeft }
                </Splitter.Panel>
                <Splitter.Panel>
                    {children?.topRight }
                </Splitter.Panel>
            </Splitter>

            <Splitter
                lazy
                layout="vertical"
                style={{ height: 'calc((100vh - 48px - 64px - 12px) * 2 / 3)', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}
            >
                <Splitter.Panel defaultSize="50%" min="30%" max="70%">
                    {children?.bottomLeft }
                </Splitter.Panel>
                <Splitter.Panel>
                    {children?.bottomRight }
                </Splitter.Panel>
            </Splitter>
        </Space>
    );
};

export default DashboardLayout;
